<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('dashBoard.no2')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('dashBoard.no4')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- -------------搜索查询栏------------------------ -->
    <search 
      :searchData="searchData" 
      @search="search" 
      :searchRight="true"
      :outputRight="$store.state.common.permiss.followlist.includes('RIGHT_ACCOUNT_LENDING_EXP')"
    ></search>

    <!-- -------------表格数据开始------------------------ -->
    <!-- <div class="table" v-if="$store.state.common.permiss.includes('RIGHT_ACCOUNT_LENDING_LIST')"> -->
    <div class="table">
      <el-table :data="tableData" stripe size="small" >
        <el-table-column align="center" prop="partnerNo" :label="$t('merchantList.no8')"></el-table-column>
        <el-table-column align="center" prop="partnerName" :label="$t('merchantList.no1')"></el-table-column>
        <el-table-column align="center" prop="appScheduleAddTime" :label="$t('merchantList.no33')"></el-table-column>
        <el-table-column align="center" prop="stage" :label="$t('merchantList.no4')">
          <template slot-scope="scope">{{$t($store.getters.merchantList_options(scope.row.stage))}}</template>
        </el-table-column>
        <el-table-column align="center" prop="planTimeStart" :label="$t('merchantList.no34')">
          <template slot-scope="scope">{{scope.row.planTimeStart?`${scope.row.planTimeStart}~${scope.row.planTimeEnd}`:'-'}}</template>
        </el-table-column>
        <el-table-column align="center" prop="appScheduleStage" :label="$t('merchantList.no32')">
          <template slot-scope="scope">{{$t($store.getters.appScheduleStage_options(scope.row.appScheduleStage))}}</template>
        </el-table-column>
        <el-table-column align="center" prop="remark" :label="$t('public.no37')"></el-table-column>
        <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="210">
          <template slot-scope="scope" >
            <!-- 进度更新 -->
            <span class="table_opr" v-if="scope.row.stage==4&&$store.state.common.permiss.followlist.includes('view')" @click="showChange(scope.row.id,scope.row.partnerName,scope.row.appScheduleStage,scope.row.remark)">{{$t('merchantList.no35')}}</span>
            <!-- 添加排期 -->
            <span class="table_opr" v-if="scope.row.stage==3&&$store.state.common.permiss.followlist.includes('add')" @click="showAdd(scope.row.id)">{{$t('merchantList.no36')}}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- ------------  分页显示栏  ------------------------ -->
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="pagination.current"
          layout="sizes, prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.total">
        </el-pagination>
      </div>
    </el-row>

    <div class="foot"></div>

    <!-- ------------------ 添加排期弹窗 -------------------- -->
    <el-dialog :title="$t('merchantList.no37')" :visible.sync="addFlag" width="650px">
      <el-form :model="addInfo"  ref="addForm" size="small" label-width="160px">
        <el-form-item :label="$t('merchantList.no38')+$t('merchantList.options2.no1')" required>
          <el-date-picker v-model="addInfo.time1" type="daterange" range-separator="~"  :start-placeholder="$t('public.beginTime')" :end-placeholder="$t('public.endTime')">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('merchantList.no39')+$t('merchantList.options2.no2')" required>
          <el-date-picker v-model="addInfo.time2" type="daterange" range-separator="~"  :start-placeholder="$t('public.beginTime')" :end-placeholder="$t('public.endTime')">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('merchantList.no40')+$t('merchantList.options2.no3')" required>
          <el-date-picker v-model="addInfo.time3" type="daterange" range-separator="~"  :start-placeholder="$t('public.beginTime')" :end-placeholder="$t('public.endTime')">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('merchantList.no41')+$t('merchantList.options2.no4')" required>
          <el-date-picker v-model="addInfo.time4" type="daterange" range-separator="~"  :start-placeholder="$t('public.beginTime')" :end-placeholder="$t('public.endTime')">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="$t('merchantList.no42')+$t('merchantList.options2.no5')" required>
          <el-date-picker v-model="addInfo.time5" type="daterange" range-separator="~"  :start-placeholder="$t('public.beginTime')" :end-placeholder="$t('public.endTime')">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addSubmit">{{$t('public.no49')}}</el-button>
          <el-button @click="addClose">{{$t('public.no50')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- ------------------ 进度更新弹窗 -------------------- -->
    <el-dialog :title="$t('merchantList.no35')" :visible.sync="changeFlag" width="80%">
      <p class="mb10" style="margin-top:-18px">{{$t('merchantList.no1')}}:{{partnerName}}</p>
      <p class="mb10">{{$t('merchantList.no34')}}</p>
      <table class="allTable mb20">
        <tr>
          <th width="40%">{{$t('merchantList.no46')}}</th>
          <th width="30%">{{$t('merchantList.no44')}}</th>
          <th width="30%">{{$t('merchantList.no45')}}</th>
        </tr>
        <template v-if="arr.length">
          <tr v-for="(item,i) in arr" :key="i">
            <td>{{$t($store.getters.appScheduleStage_options(item.pstStage))}}</td>
            <td>{{item.planTimeStart?`${item.planTimeStart}~${item.planTimeEnd}`:'-'}}</td>
            <td>{{item.execTimeStart?`${item.execTimeStart}~${item.execTimeEnd}`:'-'}}</td>
          </tr>
        </template>
        <div v-else style="textAlign:center;width:250%;height:40px;lineHeight:40px">
          {{$t('public.no23')}}
        </div>
      </table>
      <el-form :model="changeInfo" size="small" ref="changeForm" label-width="120px">
        <el-form-item :label="'*'+$t('merchantList.no32')" >
          <el-select v-model="changeInfo.appScheduleStage" required>
            <el-option :label="$t(item.label)" required :value="item.value" v-for="(item, i) in option1" :key="i"></el-option>
          </el-select>
          <span style="margin-left:50px"></span>*
          <el-date-picker v-model="changeInfo.execTime" type="daterange" range-separator="~"  :start-placeholder="$t('public.beginTime')" :end-placeholder="$t('public.endTime')">
          </el-date-picker>
        </el-form-item>
        <el-form-item :label="'*'+$t('public.no37')" >
          <el-input type="textarea" resize="none" :rows="4" v-model="changeInfo.remark" maxlength="600"></el-input>
        </el-form-item>
      </el-form>
      <div  class="flex flex-justify-center" v-if="$store.state.common.permiss.followlist.includes('edit')">
        <el-button type="primary" @click="changeSubmit">{{$t('public.no49')}}</el-button>
        <el-button @click="changeFlag = false">{{$t('public.no50')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  name: 'merchantListFollow',
  data () {
    const searchData=[
      {
        type: 'input',
        label: 'merchantList.no1',
        attr: 'partnerName',
        value: ''
      },{
        type: 'select',
        label: 'merchantList.no4',
        attr: 'stage',
        option: this.$store.state.options.merchantListFollow_option,
        value: '',
        langFlag: true,
      },{
        type: 'input',
        label: 'merchantList.no32',
        attr: 'appScheduleStage',
        value: '',
      }
    ]
    return {
      flag: true,
      loadFlag: true,
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        current: 1,
        total: 0,
      },
      searchData:searchData,
      formInline: {},// 用户查询信息数据对应字段
      tableData: [],// 表格数据
      visible: {},
      partnerId: '',
      partnerName: '',
      addFlag: false,
      changeFlag: false,
      addInfo: {
        time1: [],
        time2: [],
        time3: [],
        time4: [],
        time5: [],
      },
      changeInfo: {
        appScheduleStage: '',
        execTime: [],
        remark: '',
      },
      arr: [// 进度更新弹窗目前进度
        
      ],
      option1: this.$store.state.options.merchantListProgress_option
    }
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange (val) { // 分页按钮点击操作
      this.pagination.current = val;
      this.getTableData();
    },
    search(search) { // 搜索
      this.formInline = {
        partnerName: search.partnerName,
        stage:search.stage,
        appScheduleStage: search.appScheduleStage,
      };
      this.pagination.current = 1;
      this.getTableData();
    },
    getTableData () { // 列表数据获取
      this.loadFlag = true;
      let option = {
        pageNum:this.pagination.current,
        pageSize:this.pagination.pageSize,
        param: {
          ...this.formInline
        }
      }
      this.$axios.post(this.$action.schedule_track_list, option).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pagination.total = res.data.total;
        }else{
          this.$globalMsg.error(res.message)
        }
        this.loadFlag = false;
      })
    },
    showChange(partnerId,name,appScheduleStage,remark){
      this.partnerId = partnerId
      this.partnerName = name
      let options = {
        param: {partnerId}
      }
      this.$axios.post(this.$action.schedule_track, options).then(res => {
        if (res.code == 200) {
          this.arr = res.data.scheduleTrackBOS
          if(appScheduleStage){
            let filterArr = res.data.scheduleTrackBOS.filter(value=>value.pstStage==appScheduleStage)
            this.changeInfo.execTime = [filterArr[0].planTimeStart,filterArr[0].planTimeEnd]
            this.changeInfo.appScheduleStage = appScheduleStage
            this.changeInfo.remark = remark
          }
          this.changeFlag = true
        }else{
          this.$globalMsg.error(res.message)
        }
      })
    },
    showAdd(id){
      this.partnerId = id
      this.addFlag = true
    },
    addSubmit (){

      if(!this.addInfo.time1[0]||!this.addInfo.time2[0]||!this.addInfo.time3[0]||!this.addInfo.time4[0]||!this.addInfo.time5[0]){
        return this.$globalMsg.error(this.$t('public.no88'))
      }
      let options = {
        param: [
          {"partnerId": this.partnerId,"stage": 1,"planTimeStart": this.$store.getters.yyyy_m_d(this.addInfo.time1[0])+' 00:00:00',"planTimeEnd": this.$store.getters.yyyy_m_d(this.addInfo.time1[0])+' 00:00:00'},
          {"partnerId": this.partnerId,"stage": 2,"planTimeStart": this.$store.getters.yyyy_m_d(this.addInfo.time2[0])+' 00:00:00',"planTimeEnd": this.$store.getters.yyyy_m_d(this.addInfo.time2[0])+' 00:00:00'},
          {"partnerId": this.partnerId,"stage": 3,"planTimeStart": this.$store.getters.yyyy_m_d(this.addInfo.time3[0])+' 00:00:00',"planTimeEnd": this.$store.getters.yyyy_m_d(this.addInfo.time3[0])+' 00:00:00'},
          {"partnerId": this.partnerId,"stage": 4,"planTimeStart": this.$store.getters.yyyy_m_d(this.addInfo.time4[0])+' 00:00:00',"planTimeEnd": this.$store.getters.yyyy_m_d(this.addInfo.time4[0])+' 00:00:00'},
          {"partnerId": this.partnerId,"stage": 5,"planTimeStart": this.$store.getters.yyyy_m_d(this.addInfo.time5[0])+' 00:00:00',"planTimeEnd": this.$store.getters.yyyy_m_d(this.addInfo.time5[0])+' 00:00:00'}
        ]
      }
      // if(this.addInfo.time1[0]){
      //   options.param.push({"partnerId": this.partnerId,"stage": 1,"planTimeStart": this.$store.getters.yyyy_m_d(this.addInfo.time1[0]),"planTimeEnd": this.$store.getters.yyyy_m_d(this.addInfo.time1[1])})
      // }
      // if(this.addInfo.time2[0]){
      //   options.param.push({"partnerId": this.partnerId,"stage": 2,"planTimeStart": this.$store.getters.yyyy_m_d(this.addInfo.time2[0]),"planTimeEnd": this.$store.getters.yyyy_m_d(this.addInfo.time2[1])})
      // }
      // if(this.addInfo.time3[0]){
      //   options.param.push({"partnerId": this.partnerId,"stage": 3,"planTimeStart": this.$store.getters.yyyy_m_d(this.addInfo.time3[0]),"planTimeEnd": this.$store.getters.yyyy_m_d(this.addInfo.time3[1])})
      // }
      // if(this.addInfo.time4[0]){
      //   options.param.push({"partnerId": this.partnerId,"stage": 4,"planTimeStart": this.$store.getters.yyyy_m_d(this.addInfo.time4[0]),"planTimeEnd": this.$store.getters.yyyy_m_d(this.addInfo.time4[1])})
      // }
      // if(this.addInfo.time5[0]){
      //   options.param.push({"partnerId": this.partnerId,"stage": 5,"planTimeStart": this.$store.getters.yyyy_m_d(this.addInfo.time5[0]),"planTimeEnd": this.$store.getters.yyyy_m_d(this.addInfo.time5[1])})
      // }
      this.$axios.post(this.$action.schedule_track_add, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
          this.getTableData()
        }else{
          this.$globalMsg.error(res.message)
        }
        this.addClose()
      })
    },
    changeSubmit(){
      if(!this.changeInfo.execTime[0]||this.changeInfo.appScheduleStage==''||this.changeInfo.remark==''){
        return this.$globalMsg.error(this.$t('public.no88'))
      }
      let options = {
        param: {
          id: this.partnerId,
          appScheduleStage: this.changeInfo.appScheduleStage,
          execTimeStart: this.$store.getters.yyyy_m_d(this.changeInfo.execTime[0])+' 00:00:00',
          execTimeEnd: this.$store.getters.yyyy_m_d(this.changeInfo.execTime[1])+' 00:00:00',
          remark: this.changeInfo.remark
        }
      }
      this.$axios.post(this.$action.schedule_track_update, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
          this.getTableData()
        }else{
          this.$globalMsg.error(res.message)
        }
        this.changeClose()
      })
    },
    addClose(){
      this.$refs.addForm.resetFields()
      this.addFlag = false
      this.addInfo.time1 = []
      this.addInfo.time2 = []
      this.addInfo.time3 = []
      this.addInfo.time4 = []
      this.addInfo.time5 = []
    },
    changeClose(){
      this.$refs.changeForm.resetFields()
      this.changeFlag = false
    },
  },
  mounted () {
    this.getTableData();
  }
}
</script>
<style scoped lang="scss">

</style>
